<template>
	<view>
		<uni-nav-bar left-icon="arrowthinleft" title="忘记密码" :border="false" color="#333" @clickLeft="goBack()"></uni-nav-bar>
		<view class="padding-x-30 margin-top-40">
			<view class="margin-top-60">
				<view class="flex align-center ipt  radius48 padding-x-40 margin-bottom-30">
					<input type="text" v-model="info.mobile" placeholder="请输入您的手机号" class="fs-28 color-999 h45 flex1">
				</view>
				<view class="flex align-center justify-between ipt  radius48 padding-x-40 margin-bottom-30">
					<input class="fs-28 color-999 h45 flex1" v-model="code.captcha"  type="text" placeholder="请输入图形验证码" />
					<image class="login_code_img" :src="src" mode="aspectFill" @tap="init()"></image>
				</view>
				<view class="flex align-center justify-between ipt  radius48 padding-x-40 margin-bottom-30">
					<input type="text" v-model="info.code" placeholder="请输入验证码" class="fs-28 color-999 h45 flex1">
					<button :disabled="code.status" class="login_code" @tap="getCode()">{{code.text}}</button>
				</view>
				<view class="flex align-center  ipt  radius48 padding-x-40 margin-bottom-30">
					<input type="password" v-model="info.loginpass" placeholder="请设置新的登录密码" class="fs-28 color-999 h45 flex1">
				</view>
				<view class="flex align-center  ipt  radius48 padding-x-40 margin-bottom-30">
					<input type="password" v-model="info.quepass" placeholder="请确认新的登录密码" class="fs-28 color-999 h45 flex1">
				</view>
				
				<view class="margin-top-80 padding-x-60">
					<button class="public_btn" @tap="submit()">提交</button>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src:'',
				uuid:'',
				code: {
					text: '获取验证码',
					status: false,
					captcha:'',
				},
				info:{
					mobile:'',
					code:'',
					loginpass:'',
					quepass:''
				}
			}
		},
		onLoad() {
			this.init();
		},
		methods:{
			init(){
				this.$api.get_img_code().then(res=>{
					if(res.code == 1){
						this.src = res.data.img_src;
						this.uuid = res.data.uuid;
					}
				})
			},
			getCode(){
				let data = {
					mobile:this.info.mobile,
					type:'forget',
					uuid:this.uuid,
					captcha:this.code.captcha
				}
				let countdown = 60;
				this.code.status = true;
				this.$api.send_sms(data).then(res => {
					this.$msg(res.msg);
					if (res.code == 1) {
						this.code.text = countdown + '秒后重新获取';
						this.code.status = true;
						let timer = setInterval(() => {
							if (countdown > 0) {
								this.code.text = countdown - 1 + '秒后重新获取';
								countdown--;
							} else {
								clearInterval(timer);
								this.code.text = '获取验证码';
								this.code.status = false;
							}
						}, 1000);
					} else {
						this.code.status = false;
					}
				});
			},
			
			submit(){
				this.$api.forgetPass(this.info).then(res=>{
					this.$msg(res.msg);
					if(res.code == 1){
						setTimeout(()=>{
							uni.redirectTo({
								url:`/pages/public/login`
							})
						}, 300)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{background: #fff;}
</style>
<style lang="scss" scoped>
	.ipt{
		border-bottom: 1rpx solid rgba(134, 134, 134, 0.15);
	}
	.public_btn{
		background: linear-gradient(to bottom,#FDA932,#FE951E,#FE8009);
		border-radius: 100rpx;
	}
</style>
